<script setup>
import axios from "axios";
import {ElMessage} from "element-plus";
import { reactive, ref } from 'vue'
import Router from "@/router";
const size = ref('default')
const labelPosition = ref('right')
const sizeForm = reactive({
  phone:'',
  phoneCode:'',
})

const sendCode = () => {
  axios.get("/api/auth/sendCode/"+sizeForm.phone).then(
      res=>{
        if (res.data.code==200){
          ElMessage.success("手机号验证码发送成功")

        }else {
          ElMessage.error("手机号验证码发送失败,请重新尝试")
        }
      }
  )
}
const onSubmit = () => {
  axios.post("/api/auth/getLoginToPhone/",sizeForm).then(
      res=>{
        if (res.data.code==200){
          let token=res.data.data.token;
          console.log(token)
          localStorage.setItem("token",token);
          ElMessage.success("登录成功");
          Router.push("CourierList")
        }
      }
  )
}
</script>

<template>
  <div>
    <el-radio-group v-model="size" label="size control">
      <el-radio-button label="large">large</el-radio-button>
      <el-radio-button label="default">default</el-radio-button>
      <el-radio-button label="small">small</el-radio-button>
    </el-radio-group>
    <el-radio-group v-model="labelPosition" label="position control">
      <el-radio-button label="left">Left</el-radio-button>
      <el-radio-button label="right">Right</el-radio-button>
      <el-radio-button label="top">Top</el-radio-button>
    </el-radio-group>
  </div>
  <br />
  <el-form
      ref="form"
      :model="sizeForm"
      label-width="auto"
      :label-position="labelPosition"
      :size="size"
  >
    <el-form-item label="手机号">
      <el-input v-model="sizeForm.phone" />
    </el-form-item>

    <el-form-item label="手机号验证码">
      <el-button @click="sendCode">发送手机号验证码</el-button>
      <el-input type="password" v-model="sizeForm.phoneCode" />
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="onSubmit">登录</el-button>
      <el-button>Cancel</el-button>
    </el-form-item>
  </el-form>
</template>

<style scoped>
.el-radio-group {
  margin-right: 12px;
}
</style>